<template>
	<view class="forumDetail">
		<view class="card">
			<view class="top flex-between">
				<view class="left flex">
					<image src="/static/1.jpg" mode="aspectFill"></image>
					<view class="user">
						<view class="name">比特领航员</view>
						<view class="time">2021-04-21 14:31:01</view>
					</view>
				</view>
				<view class="right flex-center" :class="{active:true}">已关注</view>
			</view>
			<view class="content">就是立刻搭街坊是可见的就开始基地上空的飞机加快速度JFK就是打开飞机喀什地方就是看到</view>
			<view class="imgs flex">
				<block v-for="(v,k) in 2 " :key="k">
					<image src="/static/1.jpg" mode="aspectFill"></image>
				</block>
						
			</view>
			<view class="bottom flex-between">
				<view class="flex-center">
					<image src="/static/share.png" mode="widthFix"></image>
					分享
				</view>
				<view class="flex-center">
					<image src="/static/comment.png" mode="widthFix"></image>
					5
				</view>
				<view class="flex-center">
					<image src="/static/heart.png" mode="widthFix"></image>
					99
				</view>
			</view>
		</view>
		<view class='tabs flex-around'>
			<view class="flex-center" :class="{active:tabIndex == 0}" @click="changeTab(0)">评论</view>
			<view class="flex-center" :class="{active:tabIndex == 1}" @click="changeTab(1)">点赞</view>
			<view class="flex-center" :class="{active:tabIndex == 2}" @click="changeTab(2)">分享</view>
		</view>
		<view class="content-box">
			<!-- 评论 -->
			<view class="comment" v-if="tabIndex == 0">
				<block v-for="(item,index) in 5" :key="index">
					<view class="list">
						<view class="top flex-between">
							<view class="flex">
								<image src="/static/1.jpg" mode="aspectFill" class="avatar"></image>
								<view class="name">Lakin5010</view>
								<text>04-25 15:55</text>
							</view>
							<view class="like flex">
								<image src="/static/heart.png" mode="widthFix"></image>
								赞
							</view>
						</view>
						<view class="p">尽快三等奖课外金额可夫斯基的看法就是快递费就开始登记反馈第三方框架</view>
					</view>
				</block>
			</view>
			<!-- 点赞 -->
			<view class="like-list" v-if="tabIndex == 1">
				<block v-for="(item,index) in 10" :key="index">
					<view class="list flex">
						<image src="/static/1.jpg" mode="aspectFill" class="avatar"></image>
						<view class="name">风满楼</view>
					</view>
				</block>
			</view>
			
			<!-- 分享 -->
			<view class="share" v-if="tabIndex == 2"></view>
			<empty title="暂无分享" v-if="tabIndex == 2"></empty>
		</view>
	</view>
</template>

<script>
	import Empty from '@/components/empty.vue'
	export default {
		components:{
			Empty
		},
		data() {
			return {
				tabIndex:0,
			};
		},
		methods:{
			changeTab(i){
				this.tabIndex = i;
			}
		}
	}
</script>

<style lang="less">
	page{
		background: white;
	}
	@color:#d4237a;
	.forumDetail{
		.tabs{
			background: white;
			height: 70rpx;
			padding: 0 20rpx;
			view{
				width: 20%;
				height: 70rpx;
				position: relative;
				font-size: 32rpx;
				font-weight: bold;
				color:#999;
				&.active{
					color:#000;
					&::after{
						content:"";
						display: block;
						width: 20rpx;
						height: 4rpx;
						background: @color;
						position: absolute;
						bottom:3rpx;
						left:calc(50% - 10rpx);
					}
				}
			}
		}
		.card {
			background: white;
			padding: 20rpx;
			border-radius: 10rpx;
			margin-bottom: 30rpx;
		
			.top {
				.left {
					image {
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						margin-right: 20rpx;
					}
		
					.name {
						font-size: 28rpx;
					}
		
					.time {
						font-size: 20rpx;
						color: #999;
					}
				}
		
				.right {
					font-size: 26rpx;
					color: #f0f;
					border: 1px solid #f0f;
					height: 50rpx;
					padding: 0 25rpx;
					border-radius: 25rpx;
		
					&.active {
						background: #f0f;
						color: white;
					}
				}
			}
		
			.content {
				font-size: 26rpx;
				padding: 15rpx 0;
				line-height: 1.5;
			}
		
			.imgs {
				image {
					width: 200rpx;
					height: 200rpx;
					margin-right: 22rpx;
					border-radius: 10rpx;
		
					&:last-child {
						margin-right: 0;
					}
				}
			}
		
			.bottom {
				margin-top: 20rpx;
		
				view {
					width: 25%;
				}
		
				image {
					width: 36rpx;
					height: auto;
					margin-right: 10rpx;
				}
			}
		}
		.content-box{
			padding: 0 24rpx;
			.comment{
				.list{
					padding: 20rpx 0;
					.avatar{
						width: 70rpx;
						height: 70rpx;
						border-radius: 50%;
						margin-right: 15rpx;
					}
					.name{
						font-size: 30rpx;
						font-weight: bold;
						margin-right: 20rpx;
					}
					text{
						font-size: 24rpx;
						color:#999;
					}
					.like{
						font-size: 28rpx;
						color:#666;
						image{
							width: 36rpx;
							height: auto;
							margin-right: 10rpx;
						}
					}
					.p{
						padding-left: 85rpx;
						padding-right: 30rpx;
						font-size: 26rpx;
					}
				}
				
			}
			.like-list{
				.list{
					padding: 15rpx 0;
				}
				.avatar{
					width: 70rpx;
					height: 70rpx;
					border-radius: 50%;
					margin-right: 15rpx;
				}
				.name{
					font-size: 30rpx;
				}
			}
		}
		
	}
</style>
